<template>
  <div>
    <el-button type="warning" size="small" @click="loop">切换数据</el-button>
    <div ref="radar" class="radarBox"></div>
  </div>
</template>

<script>
/**
 * 动态切换图表数据
 * 1. 调用myChart.setOption传入带有不同数据的配置
 * 2. 轮询=》setInterval
 */
// 配置项
const options = {
  // 数据指示器
  tooltip: {},
  // 配置雷达图展示数据维度
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '考勤', max: 100 },
      { name: '工作效率', max: 100 },
      { name: '摸鱼', max: 100 },
      { name: '积极性', max: 100 },
      { name: '学习能力', max: 100 },
      { name: '编码能力', max: 100 }
    ]
  },
  // 雷达图数据设置
  series: [{
    type: 'radar',
    data: [
      // 数据动态添加=》正常调用接口获取
    ]
  }]
}
export default {
  mounted () {
    this.drawRadar()
  },
  beforeDestroy () {
    // 清除定时器
    clearInterval(this.st)
  },
  methods: {
    // 动态切换图表的数据
    loop () {
      this.st = setInterval(this.change, 1000)
    },
    // 切换数据渲染方法
    change () {
      // 造假数据
      const data = []
      // 生成人的数据
      for (let i = 0; i < 3; i++) {
        const item = { name: `李${i}`, value: [] }
        // 生成value数据
        for (let j = 0; j < 6; j++) {
          item.value.push(Math.floor(Math.random() * 100 + 1))
        }
        data.push(item)
      }
      // 添加新数据
      options.series[0].data = data
      // setOption绘制图表
      this.myChart.setOption(options)
    },
    // 绘制图表
    drawRadar () {
      /**
       * 思路：
       * 1. 获取实例echarts.init
       * 2. 调用实例方法setOption绘制图表=》传入不同的options配置对象，绘制不同的图表
       */
      // 基于准备好的dom，初始化echarts实例
      // 把myChart实例存储到this
      this.myChart = this.echarts.init(this.$refs.radar)
      // 绘制图表
      // 添加数据
      options.series[0].data = [{
        value: [10, 50, 60, 100, 90, 80],
        name: '李四'
      },
      {
        value: [100, 50, 80, 90, 100, 100],
        name: '王五'
      }]
      // setOption绘制图表
      this.myChart.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.radarBox {
  width: 100%;
  height: 400px;
}
</style>
